<template>
	<div id="login">
		<div id="loginbox">
			<h1>登录</h1>
			<input placeholder="账号" class="input1" v-model="account"/>
			<input placeholder="密码" v-model="pwd" type="password"/>
			<button @click="checkpwd()">登录</button>
		</div>
	</div>
</template>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	import global_ from '../Global.vue'
	import config from '../../config.js'
	
	export default {
	  name: 'login',
	  props: {
	    msg: String
	  },
	  data() {
	  	return {
	  		topBarselected:1,
			account:'',
			pwd:'',
			port:config.port,
			localhost:config.localhost
	  	}
	  },
	  methods:{
		  checkpwd(){
			  let account = this.account,
				  pwd = this.pwd;
			  //获取数据库数据
				var api='http://'+this.localhost+':'+this.port+'/login';
				this.$http.get(api,{params: {account:account,pwd:pwd}}).then((response)=>{
					//登录成功
					if(response.body.login == 1){
						window.localStorage.setItem('username',account);
						window.localStorage.setItem('loginStatus',1);
						window.localStorage.setItem('token',response.body.token);
						this.$root.username= account;
						this.$root.loginStatus= 1;
						this.$root.token= response.body.token;
						this.$router.push('/home')
						this.$router.go(0);
					}
				},function(err){
						console.log(err);
				})
			  console.log(account,pwd);
		  }
	  }
	}
</script>

<style>
	#login{
		margin-top: 4rem;
		display: flex;
	}
	#login #loginbox{
		border: #000000 0.0625rem solid;
		width: 50vw;
		height: 70vh;
		margin: auto auto;
		display: flex;
		flex-direction: column;
		background-image: url(../assets/star.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 10px;
	}
	#login #loginbox h1{
		color: white;
		background-image: linear-gradient(135deg,white,blue);
		-webkit-background-clip:text;
		color: transparent;
	}
	#login #loginbox input{
		width: 30vw;
		height: 5vh;
		margin: 3vh auto;
	}
	#login #loginbox .input1{
		/* margin-top: 4vh; */
	}
	#login #loginbox button{
		width: 10vw;
		height: 5vh;
		margin: 3vh auto;
	}
</style>
